<script setup lang="ts">
import HeaderView from '../components/HeaderView.vue'
import FooterView from '../components/FooterView.vue'
</script>

<template>

  <HeaderView />

  <div class="container-container-my">

    <el-row :gutter="20">
      <el-col :span="4">
        <div class="my-left">
          <div class="face">
            <div class="facename">{{ userInfo.getUser().first }}</div>
            <h2>{{ userInfo.getUser().email }}</h2>
          </div>
          <div class="list">
            <router-link to="/Myhome">
              <svg t="1745294444222" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7560"><path d="M793.1 959.9H232.9C158.5 959.9 98 899.4 98 825V201.5c0-74.4 60.5-134.9 134.9-134.9H793c74.4 0 134.9 60.5 134.9 134.9V825c0.1 74.4-60.4 134.9-134.8 134.9z m-560.2-804c-25.1 0-45.6 20.5-45.6 45.6V825c0 25.1 20.5 45.6 45.6 45.6H793c25.1 0 45.6-20.5 45.6-45.6V201.5c0-25.1-20.5-45.6-45.6-45.6H232.9z" p-id="7561"></path><path d="M707.9 365.7H322.1c-24.7 0-44.7-20-44.7-44.7 0-24.7 20-44.7 44.7-44.7h385.7c24.7 0 44.7 20 44.7 44.7 0 24.7-20 44.7-44.6 44.7zM707.9 557.1H322.1c-24.7 0-44.7-20-44.7-44.7s20-44.7 44.7-44.7h385.7c24.7 0 44.7 20 44.7 44.7s-20 44.7-44.6 44.7zM573.3 748.5H322.1c-24.7 0-44.7-20-44.7-44.7 0-24.7 20-44.7 44.7-44.7h251.2c24.7 0 44.7 20 44.7 44.7 0 24.7-20 44.7-44.7 44.7z" p-id="7562"></path></svg>
              My Orders
            </router-link>

            <router-link to="/Settings" class="on">
              <svg t="1745294165954" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7098"><path d="M668.6 922.2H357.4c-48.1 0-92.9-26-116.7-67.8L84.2 579.7c-23.4-41-23.4-92 0-133L240.8 172c23.8-41.8 68.5-67.8 116.7-67.8h311.1c48.1 0 92.9 26 116.7 67.8l156.6 274.7c23.4 41 23.4 92 0 133L785.2 854.4c-23.8 41.8-68.5 67.8-116.6 67.8zM357.4 193.8c-16 0-30.9 8.6-38.9 22.6L162 491.1c-7.8 13.7-7.8 30.6 0 44.3l156.6 274.7c7.9 13.9 22.8 22.6 38.9 22.6h311.1c16 0 30.9-8.6 38.9-22.6L864 535.4c7.8-13.7 7.8-30.6 0-44.3L707.4 216.4c-7.9-13.9-22.8-22.6-38.9-22.6H357.4z"  p-id="7099"></path><path d="M513 696.4c-101 0-183.2-82.2-183.2-183.2S412 330.1 513 330.1s183.2 82.2 183.2 183.2S614 696.4 513 696.4z m0-276.8c-51.6 0-93.6 42-93.6 93.6s42 93.6 93.6 93.6 93.6-42 93.6-93.6-42-93.6-93.6-93.6z"  p-id="7100"></path></svg>
              Settings
            </router-link>
          </div>
        </div>
      </el-col>
      <el-col :span="20">
        <div class="my-right">

          <h4>
            <router-link to="/Settings"><svg t="1745315787006" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9072" width="20" height="20"><path d="M695.9 958.1c-12.4 0-24.7-4.7-34.2-14.2L325.9 608.1c-53.5-53.5-53.5-140.5 0-193.9L661.8 78.4c18.9-18.9 49.5-18.9 68.3 0 18.9 18.9 18.9 49.5 0 68.3L394.2 482.5c-15.8 15.8-15.8 41.5 0 57.3L730 875.6c18.9 18.9 18.9 49.5 0 68.3-9.3 9.5-21.7 14.2-34.1 14.2z" p-id="9073"></path></svg></router-link>
            Change Password
          </h4>

          <div class="my-right-Settingspass">

            <el-form
              ref="ruleFormRef"
              :model="ruleForm"
              :rules="rules"
              label-width="auto"
            >

        <el-form-item prop="email">
          <el-input
            v-model="ruleForm.email"
            disabled
            placeholder="Please enter Email Address"
            />
        </el-form-item>

        <el-form-item prop="code">
              <el-input
              oninput="value=value.replace(/[^\d.]/g,'')"
              maxlength="4"
              v-model="ruleForm.code"
               placeholder="Please enter Verification code"
              style="width: calc( 97% - 160px); margin-right: 3%;"
              />
              <el-button style="width: 160px;" :disabled="sendEmailDisabled" @click="getEmailCode(ruleFormRef)">{{ sendEmailMessage }}</el-button>
            </el-form-item>


        <el-form-item prop="password">
          <el-input
            v-model="ruleForm.password"
            placeholder="Please enter Password"
            type="password"
            />
        </el-form-item>


            <div class="center-button">
              <el-form-item  style="margin-bottom: 0;">
                <el-button type="primary" @click="submitForm(ruleFormRef)">RECOVER</el-button>
              </el-form-item>
              </div>

        </el-form>

          </div>

        </div>
      </el-col>
    </el-row>

  </div>

  <FooterView class="footer" />

</template>



<script lang="ts">
import { reactive, ref } from 'vue'

import type { FormInstance, FormRules } from 'element-plus'
import { ElLoading, ElNotification, type LoadingOptions } from 'element-plus'
import createAxios from '../utils/axios'
import { useUserInfo } from '../stores/userInfo'

const userInfo = useUserInfo()

interface RuleForm {
  email: string
  password: string
  code:string
}


const ruleFormRef = ref<FormInstance>()
const sendEmailDisabled = ref(false);
const sendEmailMessage = ref('Get verification code');
const ruleForm = reactive<RuleForm>({
  email: userInfo.getUser().email,
  code:'',
  password:'',
})


const rules = reactive<FormRules<RuleForm>>({
  email: [
    { required: true, message: 'Please enter email address', trigger: 'blur' },
    { type:"email", message: 'Please input correct email address', trigger: 'blur' },
  ],
  code: [
    { required: true, message: 'Please enter email verification code', trigger: 'blur' },
    { min:4, max:4, message: 'Verification Code must be a number', trigger: 'blur' }
  ],
  password: [
    { required: true, message: 'Please enter password', trigger: 'blur' },
    { min:8, message: 'Password must be greater than 8 characters', trigger: 'blur' },
  ]
})

// 获取邮件验证码
const getEmailCode = async (formEl: FormInstance | undefined) =>{
  const email = ruleForm.email = userInfo.getUser().email
  if(!email){
    ElNotification({
        type: 'error',
        message:'Please input correct email address',
        zIndex: 9999,
    })
    return
  }


  // 不可用
  if (sendEmailDisabled.value){
    return;
  }
  sendEmailDisabled.value = true
  sendEmailMessage.value = 'Try again in 2 minutes'
  setTimeout(function(){
    sendEmailDisabled.value = false
    sendEmailMessage.value = 'Get verification code'
  },2*60*1000)

  // 发送验证码
  createAxios({
        url: '/frontend/account/send-email',
         data: {email:email,is_reg:0},
        method: 'post',
    },{showSuccessMessage: true,})
    .then((res) => {
        // 设置缓存
        console.log('token', res.data)
    })
    .finally(() => {
    })
}

// 提交
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {
      //window.location.href = '/Settings';
      // 请求接口
      createAxios({
            url: '/frontend/account/password',
            data: ruleForm,
            method: 'post',
        },{showSuccessMessage: true,})
        .then((res) => {
            // 设置缓存
            console.log('token', res.data)
            window.location.href = '/Settings';
        })
        .finally(() => {
        })
    }
  })
}

export default {
  data() {
    return {
      pageTitle: 'Change Password - Personal Center'
    };
  },
  created() {
    this.updateTitle();
  },
  methods: {
    updateTitle() {
      document.title = this.pageTitle; // 或者根据需要动态设置标题
    }
  }

}
</script>

<style>
:root {
   --el-component-size:46px !important;;
  }



.container-container-my {
  max-width: 1520px;
  min-width: 1000px;
  padding: 0 5%;
  margin: 170px auto 0 auto;
  min-height: 500px;
  .my-left {
    min-width: 175px;
    padding: 10px;
    .face {
      text-align: center;
      .facename {
      background-color: #333333;
      color: #fff;
      width: 60px;
      height: 60px;
      border-radius: 100px;
      margin-right: 6px;
      line-height: 60px;
      text-align: center;
      font-size: 20px;
      font-weight: 500;
      margin: 0 auto 14px auto;
      }
      h2 {
        font-size: 12px;
        line-height: 1.2;
        width: 125px;
        margin: 4px 0 0 25px;
        overflow: hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
      }
    }
    .list {
      margin: 50px 10px;

      a {
        font-weight: 600;
        display:flex;
        padding: 14px 16px;
        margin-top: 6px;

      }
      svg {
        margin-right: 4px;
        width: 18px;
        height: 18px;
      }
      a , svg {
      color: #666; fill: #666;
      height: 20px;
      line-height: 20px;
      }
      a.on , a.on svg {
        color: #ed0467; fill: #ed0467;
      }
      a:hover , a:hover svg   {
      background-color: #f6f6f6;
      }

    }
  }
  .my-right {
    padding: 10px 0 50px 60px;
    border-left: 1px solid #f1f1f1;
    h4 {
      display: flex;
      font-size: 22px;
      svg {
      margin: 10px 10px 0 0;
      width: 22px;
      height: 22px;
    }
    }

    .my-right-Settingspass {
      padding: 50px 0 0 0;
      width: 600px;

      .el-button {
      height: 46px;
      line-height: 46px;
    }
    .el-button:hover {
      border: 1px solid #e62424;
      background-color: #ffefef;
      color: #e62424;
    }


      p {
      text-align: center;

      font-weight: 600;
      a {
        color: #e62424;
      }
    }
    .center-button {
      padding: 20px 0 0 0;
      width: 100%;
      .el-button {
        border: 0;
        width: 100% !important;
        font-weight: 600;
        background-image: linear-gradient(to right, #f41cb2, #f25511);
      }
      .el-button:hover {
        background-image: linear-gradient(to right, #d41b9d, #f25511);
        color: #fff;
      }
    }

    }

  }
}

@media only screen and (max-width: 1000px) {
  .container-container-my {
    margin-top: 20px;
    max-width: 100%;
    min-width: 100%;
  }
  .el-col-4 {
    width: 100% !important;
    min-width: 100% !important;
  }
  .my-left {
    width: 100% !important;
    min-width: 100% !important;
    padding: 0 !important;;
    .face {
      display: none;
    }
    .list {
      padding: 70px 0 0 0 !important;
      margin: 0 !important;
      display: flex;
      justify-items: center;
      align-items: center;
      a {
        width: 50%;
        text-align: center;
      }
    }
  }
  .el-col-20 {
    width: 100% !important;
    min-width: 100% !important;
  }
  .my-right {
    padding: 0 !important;
    border-left: 0 !important;
    border-top: 2px solid #000;
    margin-top: 10px;
    h4 {
      padding: 30px 0 10px 0;
      font-size: 18px !important;
      svg {
        width: 16px !important;
        height: 16px !important;
      }
    }
    .my-right-Settingspass {
      padding-top: 20px !important;
       width: 100% !important;
    }
  }
  .footer {
    display: none;
  }
}
</style>

